<template>
  <div class="page">
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%" height="calc(100% - 40px)">
        <el-table-column prop="firstDate" fixed label="日期" width="120"/>
        <el-table-column prop="newUserCount" label="新用户数">
          <template #default="scope">
            <div class="cell-text">{{scope.row.newUserCount}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="count" :label="'第'+(i+1)+'日'" v-for="i in 29">
          <template #default="scope">
            <div class="cell-text">{{scope.row[`day${i+1}Retention`]}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onBeforeUnmount, ref} from "vue";
import api from '../../api/index.js'
import * as echarts from "echarts";

const tableData = ref([])
onMounted(() => {

})
onBeforeUnmount(() => {

})
const getData = async () => {
  try {
    const res = await api.getRetentData()
    if (res.data && res.data.length) {
      tableData.value = res.data
    }
  } catch(e){}
}
getData()

</script>

<style scoped lang="scss">
.page,.table-box{
  position: relative;
  height: 100%;
}
</style>
